<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline';">
    <meta http-equiv="X-Content-Security-Policy" content="default-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline';">
    <title>Hello React!</title>
    <link rel="stylesheet" href="./node_modules/monaco-editor/min/vs/editor/editor.main.css">
    <link rel="stylesheet" href="./assets/css/fontello.css">
    <style>
      :root {
        --color-danger: rgb(160, 0, 0);

        --color-active-0: rgb(204, 135, 41);
        --color-bg-0: rgb(30, 30, 30);
        --color-font-0: rgb(200, 200, 200);

        --color-active-1: rgb(255, 185, 89);
        --color-bg-1: rgb(60, 60, 60);
        --color-font-1: rgb(100, 100, 100);

        --color-bg-2: rgb(40, 40, 40);

        --color-bg-3: rgb(80, 80, 80);

        --size-font-md: 14px;
        --size-font-sm: 12px;
        --size-font-xs: 10px;
        --size-font-lg: 16px;
        --size-font-xl: 18px;
        --size-font-xxl: 20px;

        --zindex-0: 100;
      }
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        user-select: none;
      }
      body, html {
        background-color: var(--color-bg-0);
        color: var(--color-font-0);
        font-size: var(--size-font-md);
        width: 100%;
        height: 100%;
      }
      #app {
        width: 100%;
        height: 100%;
      }
      *::-webkit-scrollbar {
        width: 4px;
        height: 4px;
        background: transparent;
      }
      *::-webkit-scrollbar-thumb {
        background: rgba(150, 150, 150, 0.2);
        border-radius: 10px;
      }
      *::-webkit-scrollbar-thumb:hover {
        background: rgba(150, 150, 150, 0.4);
      }
    </style>
  </head>
  <body>
    <div id="app"></div>
    <input id="folder__selector" type="file" webkitdirectory="true" hidden/>
    <input id="file__selector" type="file" hidden/>
  
    <script src="./node_modules/react/umd/react.development.js"></script>
    <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
    <script>
      var require = { paths: { 'vs': './node_modules/monaco-editor/min/vs' } };
    </script>
    <script src="./node_modules/monaco-editor/min/vs/loader.js"></script>
    <script src="./node_modules/monaco-editor/min/vs/editor/editor.main.nls.js"></script>
    <script src="./node_modules/monaco-editor/min/vs/editor/editor.main.js"></script>

    <!-- Main -->
    <script src="./dist/main.js"></script>
  </body>
</html>